import { ReactElement, useContext } from 'react'
import { Row, Col, Form } from 'antd'
import style from './index.module.less'
import { Context } from '../../context'
import UnitNumberInput from '@components/unitNumberInput'
import TextCell from '@src/components/textCell'

const { Item } = Form

function Main (): ReactElement {
  const { caseDetail: d } = useContext(Context)
  const disabled = d !== null && ['已确认', '抽查中', '已抽查'].includes(d.score_status)
  return (
    <div className={style.container} id='inputBlockFour'>
      <div className={style.title}>受理工作量</div>
      <Row>
        <Col span={9}>
          <Item label='1. 协助申请人完成减免缓' name='preservation_count'>
            {disabled ? <TextCell unit='次' /> : <UnitNumberInput />}
          </Item>
        </Col>
        <Col span={2}><span /></Col>
        <Col span={9}>
          <Item label='2. 完成保全' name='fee_derate_count'>
            {disabled ? <TextCell unit='次' /> : <UnitNumberInput />}
          </Item>
        </Col>
      </Row>
      <Row>
        <Col span={9}>
          <Item label='3. 达成补充协议' name='supgreement_count'>
            {disabled ? <TextCell unit='次' /> : <UnitNumberInput />}
          </Item>
        </Col>
        <Col span={2}><span /></Col>
      </Row>
    </div>
  )
}

export default Main
